<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Menu, X } from 'lucide-vue-next'
import ThemeControl from './ThemeControl.vue'

const router = useRouter()
const route = useRoute()

// 移动端菜单状态
const isMobileMenuOpen = ref(false)
// 滚动状态
const isScrolled = ref(false)

/**
 * 处理滚动事件，更新导航栏样式
 */
const handleScroll = () => {
  isScrolled.value = window.scrollY > 50
}

/**
 * 切换移动端菜单显示状态
 */
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

/**
 * 导航到指定路由
 */
const navigateTo = (routeName: string) => {
  router.push({ name: routeName })
  isMobileMenuOpen.value = false
}

/**
 * 检查当前路由是否激活
 */
const isActiveRoute = (routeName: string) => {
  return route.name === routeName
}

// 导航菜单项
const menuItems = [
  { name: 'home', label: '首页' },
  { name: 'portfolio', label: '作品展示' },
  { name: 'about', label: '关于我们' },
  { name: 'contact', label: '联系我们' }
]

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <nav
    :class="[
      'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
      isScrolled
        ? 'bg-white/90 dark:bg-black/90 backdrop-blur-md border-b border-gray-200 dark:border-gray-800'
        : 'bg-transparent'
    ]"
  >
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <!-- Logo -->
        <div
          class="flex items-center cursor-pointer group"
          @click="navigateTo('home')"
        >
          <div
            class="text-2xl font-bold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-cyber-green transition-colors"
          >
            火叶工作室
          </div>
        </div>

        <!-- 桌面端菜单 -->
        <div class="hidden md:block">
          <div class="ml-10 flex items-center space-x-8">
            <div class="flex items-baseline space-x-8">
              <button
                v-for="item in menuItems"
                :key="item.name"
                :class="[
                  'px-3 py-2 text-sm font-medium transition-all duration-200 relative',
                  isActiveRoute(item.name)
                    ? 'text-primary-400 dark:text-cyber-green'
                    : 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'
                ]"
                @click="navigateTo(item.name)"
              >
                {{ item.label }}
                <!-- 激活状态下划线 -->
                <div
                  v-if="isActiveRoute(item.name)"
                  class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary-400 dark:bg-cyber-green rounded-full"
                />
              </button>
            </div>
            <!-- 主题控制按钮 -->
            <ThemeControl />
          </div>
        </div>

        <!-- 移动端菜单按钮和主题切换 -->
        <div class="md:hidden flex items-center space-x-2">
          <ThemeControl />
          <button
            class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white p-2 transition-colors"
            @click="toggleMobileMenu"
          >
            <Menu
              v-if="!isMobileMenuOpen"
              class="h-6 w-6"
            />
            <X
              v-else
              class="h-6 w-6"
            />
          </button>
        </div>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div
      v-if="isMobileMenuOpen"
      class="md:hidden bg-white/95 dark:bg-black/95 backdrop-blur-md border-t border-gray-200 dark:border-gray-800"
    >
      <div class="px-2 pt-2 pb-3 space-y-1">
        <button
          v-for="item in menuItems"
          :key="item.name"
          :class="[
            'block w-full text-left px-3 py-2 text-base font-medium transition-colors rounded-lg',
            isActiveRoute(item.name)
              ? 'text-primary-500 dark:text-cyber-green bg-primary-50 dark:bg-gray-800/50'
              : 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800/30'
          ]"
          @click="navigateTo(item.name)"
        >
          {{ item.label }}
        </button>
      </div>
    </div>
  </nav>
</template>
